
<style lang="stylus" scoped>

</style>

<template>
  <div>
    <div class="row justify-between">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <q-card class="shadow-2">
          <q-card-section class="q-pa-sm">
            <div class="row items-center no-wrap">
              <div class="col">
                <q-chip class="no-border-radius" color="light-blue" text-color="white" size="10px" style="margin:0;">供应商</q-chip>
                <q-chip square class="no-border-radius q-ml-none q-mr-none text-weight-bold">
                  {{ mainInfoForm.code }}
                </q-chip>
              </div>
              <div class="col-auto">
                <q-btn color="grey-7" round flat icon="more_vert">
                  <q-menu cover auto-close>
                    <q-list>
                      <q-item clickable @click="$router.go(-1)">
                        <q-item-section>返回</q-item-section>
                      </q-item>
                    </q-list>
                  </q-menu>
                </q-btn>
              </div>
            </div>
          </q-card-section>
          <q-separator />
          <q-card-section class="q-pa-sm">
            <main-field v-if="mainInfoForm.id" :form="mainInfoForm" :field="fieldConfig"></main-field>
          </q-card-section>
        </q-card>
      </div>
    </div>
    <div style="margin-top:10px;" class="bg-white shadow-1">
      <q-card>
        <q-tabs
          v-model="tab"
          dense
          class="bg-grey-2 text-teal"
          active-color="primary"
          indicator-color="primary"
          align="left"
          narrow-indicator>
            <q-tab name="basic" label="基本视图"/>
            <q-tab name="company" label="公司视图"/>
            <q-tab name="SupplierOrganization" label="采购组织视图"/>
        </q-tabs>
        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="basic" style="padding:3px;">
            <basic :id="id"></basic>
          </q-tab-panel>
          <q-tab-panel name="company" style="padding:3px;">
            <Company :id="id"></Company>
          </q-tab-panel>
          <q-tab-panel name="SupplierOrganization" style="padding:3px;">
            <supplier-organization :id="id"></supplier-organization>
          </q-tab-panel>
        </q-tab-panels>
      </q-card>
    </div>
  </div>
</template>

<script>
import MainField from 'src/pages/Common/SecondPackage/MainField/MainField'
import Basic from 'src/pages/Mdm/Suppliers/SupplierPreview/BasicPreview/Basic.vue'
import Company from 'src/pages/Mdm/Suppliers/SupplierPreview/CompanyPreview/Company.vue'
import SupplierOrganization from 'src/pages/Mdm/Suppliers/SupplierPreview/SupplierOrganizationPreview/SupplierOrganization.vue'
export default {
  name: 'supplierDetails',
  components: {
    MainField,
    Basic,
    Company,
    SupplierOrganization
  },
  data () {
    return {
      id: '',
      tab: 'basic',
      addOrEdit: 1,
      maximizedToggle: false,
      loadingBtn: false,
      mainInfoForm: {
        name: '',
        code: '',
        createTime: '',
        createUserName: ''
      },
      fieldConfig: [
        {
          name: 'name',
          label: '供应商名称'
        },
        {
          name: 'code',
          label: '供应商编码'
        },
        {
          name: 'createUserName',
          label: '创建人'
        },
        {
          name: 'createTime',
          label: '创建时间'
        },
        {
          name: 'remark',
          label: '说明',
          type: 'textarea'
        }
      ]
    }
  },
  computed: {

  },
  watch: {

  },
  mounted () {
    this.id = this.$route.params.id
    this.init()
  },
  methods: {
    async init () {
      await this.mainInfoGet()
    },
    async mainInfoGet () {
      await this.$api({
        method: 'get',
        url: `/mdm/supplierMstr/findById/${this.$route.params.id}`,
        successCallback: ({ data }) => {
          this.mainInfoForm = { ...data }
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
    }
  },
  validations: {

  }
}
</script>
